// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
import QtQuick 1.1
Rectangle {
    id:background
    width: 400
    height: 500
    color:"#bfbfbf"
    property string lang: "1"

    property variant alarmDays: "";
    property variant alarmTime:"";
    property variant editMode: false;
    property variant onOffMode: true;

    Item {
        id: titleBox

        width: 400
        height: 40
        z: 1

        LeftTitle{
            x: 0
            y: -10
            text: {if(lang=="1") qsTr("alarms");else qsTr("alarmas");}
            size: 32
        }
    }
    MouseArea {
        id: mouseRegion
        anchors.fill: parent;
        property variant clickedPosition: "1,1"
        x: 0
        y: 0
        width: 576
        height: 500
        anchors.topMargin: 0

        onPressed: {
            clickedPosition  = Qt.point(mouse.x,mouse.y)
        }
        onPositionChanged: {
            var mousePosX = (mouse.x <0) ? 0 : mouse.x
           var mousePosY = (mouse.y <0) ? 0 : mouse.y
            var relative = Qt.point(mousePosX-clickedPosition.x, mousePosY-clickedPosition.y)
            background.pos = Qt.point(background.pos.x+relative.x,
                                    background.pos.y+relative.y)

        }
    }
    Rectangle{
        id:alarmTitle;
        width:parent.width;
        height:25;
        color:"white"
        anchors.top: parent.top;
        anchors.left: parent.left;
        opacity:0
        border.color: "black"
        border.width: 1;

        Text{
            id:alarmTitleText;
            text:"Alarms"
            font.pointSize: 15;
            font.bold: true;
        }

    }
    Rectangle{
        id: body;
        width: parent.width;
        height: 425;
        color:"#bfbfbf";
        anchors.top: alarmTitle.bottom;
        anchors.left: parent.left;
        border.color: "black"
        border.width: 1;

        Component{
            id:alarmLayoutDelegate;
            Column{
                id:layoutCol;
                Rectangle{
                    id:alarmLayout;
                    width: parent.width;
                    height: 50;
                    color:"#bfbfbf";
                    anchors.top: body.top;
                    anchors.left: parent.left;
                    border.color: "black"
                    border.width: 1;

                    Rectangle{
                        id:image;
                        width:40;
                        height:40;
                        color:"#bfbfbf";
                        anchors.top: parent.top;
                        anchors.topMargin: 5;
                        anchors.left: parent.left;
                        anchors.leftMargin: 5;
                        border.color: "black"
                        border.width: 1;

                        Image{
                            source:"Assets/Alarm/clock.png"
                        }
                    }

                    Rectangle{
                        id:alarm;
                        width:300;
                        height: 20;
                        color:"white";
                        anchors.left: image.right;
                        anchors.leftMargin: 5;
                        anchors.top: parent.top;
                        anchors.topMargin: 5;
                        border.color: "black"
                        border.width: 1;

                        Text{
                            id:titleB;
                            anchors.left: parent.left;
                            anchors.leftMargin: 2;
                            anchors.top: parent.top;
                            anchors.topMargin: 2;
                            text:title
                        }

                        Text{
                            id:timeB;
                            anchors.left: titleB.right;
                            anchors.leftMargin: 2;
                            anchors.top: parent.top;
                            anchors.topMargin: 2;
                            text:timeHour
                            font.bold: true;
                        }

                        Text{
                            id:colonB;
                            anchors.left: timeB.right;
                            anchors.leftMargin: 1;
                            anchors.top: parent.top;
                            anchors.topMargin: 2;
                            text:":";
                            font.bold: true;
                        }
                        Text{
                            id:timeMinutesB;
                            anchors.left: colonB.right;
                            anchors.leftMargin: 1;
                            anchors.top: parent.top;
                            anchors.topMargin: 2;
                            text:timeMin
                            font.bold: true;
                        }
                        Text{
                            id:timeAmPmB;
                            anchors.left: timeMinutesB.right;
                            anchors.leftMargin: 3;
                            anchors.top: parent.top;
                            anchors.topMargin: 2;
                            text:timeAmPm;
                            font.bold: true;
                        }
                    }

                    Rectangle{
                        id:repeat;
                        width:300;
                        height:20;
                        color:"white";
                        anchors.top: alarm.bottom;
                        anchors.left: alarm.left;
                        border.color: "black"
                        border.width: 1;

                        Text{
                            id:alarmDaysText;
                            text:days;
                            anchors.left: parent.left;
                            anchors.leftMargin: 2;
                            anchors.top: parent.top;
                            anchors.topMargin: 2;
                        }
                    }

                    Rectangle{
                        id:onOff;
                        width:40;
                        height:40;
                        color:"#bfbfbf";
                        anchors.left: repeat.right;
                        anchors.leftMargin: 5;
                        anchors.top: parent.top;
                        anchors.topMargin: 5;
                        border.color: "black"
                        border.width: 1;

                        Image{
                            id:onOffPic
                            source:"Assets/Alarm/on.png"
                        }

                        MouseArea{
                            anchors.fill: parent;
                            onClicked: if(!editMode){
                                           if(onOffMode){
                                               onOffPic.source = "Assets/Alarm/off.png"
                                               onOffMode = false;
                                           }
                                           else{
                                               onOffPic.source = "Assets/Alarm/on.png"
                                               onOffMode = true;
                                           }
                                       }
                                        else
                                           layoutModel.remove(index);
                        }
                    }


                }
            }
        }

        ListView {
                 anchors.fill: parent
                 model: layoutModel
                 delegate: alarmLayoutDelegate
             }
        ListModel {
            id:layoutModel;
             ListElement {
                 title: "Default Alarm"
                 timeHour: "4"
                 timeMin: "00"
                 timeAmPm:"AM"
                 days: "Sunday"
             }
        }
    }

    Rectangle{
        id:addRemove;
        width:parent.width;
        height:50;
        color:"white";
        anchors.top: body.bottom;
        anchors.left: parent.left;
        border.color: "black"
        border.width: 1;

        Text{
            id:editModeText
            text:"Edit Mode Enabled"
            visible: false;
            anchors.centerIn: parent;
            font.pointSize: 10
            font.bold: true;
        }

        Rectangle{
            id:remove
            width:40;
            height:40;
            color:"white"
            anchors.left:parent.left;
            anchors.leftMargin: 5;
            anchors.top: parent.top;
            anchors.topMargin: 5;


            Image{
                source:"Assets/Alarm/remove.png"
            }

            MouseArea{
                anchors.fill: parent;
                onClicked: callEdit(editMode);
            }
        }

        Rectangle{
            id:add
            width:40;
            height:40;
            color:"white"
            anchors.right:parent.right;
            anchors.rightMargin: 5;
            anchors.top: parent.top;
            anchors.topMargin: 5;

            Image{
                source:"Assets/Alarm/add.png"
            }

            MouseArea{
                anchors.fill: parent;
                onClicked: addAlarm();
            }

        }
    }


    Rectangle{
        id:addAlarmBox;
        anchors.centerIn: parent;
        width:300;
        height: 255;
        color:"#bfbfbf";
        visible: false;
        border.color: "black"
        border.width: 1;

        Rectangle{
            id:save;
            width:100;
            height:25;
            color:"limegreen";
            anchors.right: parent.right;
            anchors.rightMargin: 5;
            anchors.bottom: parent.bottom;
            anchors.bottomMargin: 5;
            border.color: "black"
            border.width: 1;

            Text{
                text:"Save";
                font.pointSize: 11;
                font.bold: true;
                anchors.centerIn: parent;
            }

            MouseArea{
                anchors.fill: parent;
                onClicked: saveAlarm(alarmTitleInput.text,time.text,timeMinutes.text,timeAmPm.text);
            }
        }


        Rectangle{
            id:cancel;
            width:100;
            height:25;
            color:"red";
            anchors.left: parent.left;
            anchors.leftMargin: 5;
            anchors.bottom: parent.bottom;
            anchors.bottomMargin: 5;
            border.color: "black"
            border.width: 1;

            Text{
                text:"Cancel";
                font.pointSize: 11;
                font.bold: true;
                anchors.centerIn: parent;
            }
        }

        Rectangle{
            id:addAlarmTitle;
            width: 290;
            height: 25;
            color:"white";
            anchors.top: parent.top;
            anchors.topMargin: 5;
            anchors.left: parent.left;
            anchors.leftMargin: 5;
            border.color: "black"
            border.width: 1;

            TextInput{
                id:alarmTitleInput;
                width:parent.width;
                height: parent.height;
                text:"Alarm title";
                anchors.left: parent.left;
                anchors.leftMargin: 2;
                anchors.top: parent.top;
                anchors.topMargin: 2;
                font.pointSize: 12;
            }
        }
        Rectangle{
            id:alarmPreview;
            width:290;
            height: 20;
            color:"white";
            anchors.top: addAlarmTitle.bottom;
            anchors.topMargin: 5;
            anchors.left: parent.left;
            anchors.leftMargin: 5;
            border.color: "black"
            border.width: 1;

            Text{
                id:time;
                anchors.left: parent.left;
                anchors.leftMargin: 2;
                anchors.top: parent.top;
                anchors.topMargin: 2;
                text:"Hour";
                font.bold: true;
            }

            Text{
                id:colon;
                anchors.left: time.right;
                anchors.leftMargin: 1;
                anchors.top: parent.top;
                anchors.topMargin: 2;
                text:":";
                font.bold: true;
            }
            Text{
                id:timeMinutes;
                anchors.left: colon.right;
                anchors.leftMargin: 1;
                anchors.top: parent.top;
                anchors.topMargin: 2;
                text:"Minutes";
                font.bold: true;
            }
            Text{
                id:timeAmPm;
                anchors.left: timeMinutes.right;
                anchors.leftMargin: 3;
                anchors.top: parent.top;
                anchors.topMargin: 2;
                text:"AmORPm";
                font.bold: true;
            }
        }
        Rectangle{
            id:repeatPreview;
            width:290;
            height:20;
            color:"white";
            anchors.top: alarmPreview.bottom;
            anchors.left: alarmPreview.left;
            border.color: "black"
            border.width: 1;

            Text{
                id:alarmDaysText;
                text:alarmDays;
                anchors.left: parent.left;
                anchors.top: parent.top;
                anchors.topMargin: 2;
            }
        }

        Rectangle{
            id:selectDay;
            width:144;
            height: 140;
            color:"#bfbfbf";
            anchors.left: parent.left
            anchors.leftMargin: 5;
            anchors.top: repeatPreview.bottom;
            anchors.topMargin: 2;
            border.color: "black"
            border.width: 1;



                Component{
                    id:dayDelegate;

                        Column{
                            id:dayCol
                            spacing: 2;
                            Rectangle{
                                id: days;
                                width:144;
                                height:20;
                                color:"#bddeff";
                                border.color: "black";
                                border.width: 1;

                                Text{
                                    id:dayText;
                                    text:day;
                                    font.bold: true;
                                    anchors.centerIn: parent;
                                }

                                MouseArea{
                                    anchors.fill: parent;
                                    onPressed: days.color="#bdffec";
                                    onReleased: days.color="#bddeff";
                                    onClicked: //if(days.color=="#bddeff"){
                                                  // days.color="#bdffec"
                                                   alarmDays = alarmDays + " " + dayText.text,
                                                  // console.log(alarmDays);
                                                   alarmDaysText.text = alarmDays;
                                              // }
                                               //else
                                                   //days.color="gray"
                                }
                            }
                        }


            }

            ListView {
                     anchors.fill: parent
                     model: dayModel
                     delegate: dayDelegate

                 }
            ListModel {
                id:dayModel;
                 ListElement {
                     day: "Sunday"
                 }
                 ListElement {
                     day: "Monday"
                 }
                 ListElement {
                     day: "Tuesday"
                 }
                 ListElement {
                     day: "Wednesday"
                 }
                 ListElement {
                     day: "Thursday"
                 }
                 ListElement {
                     day: "Friday"
                 }
                 ListElement {
                     day: "Saturday"
                 }
             }
        }
        Rectangle{
            id:selectTime;
            width:144;
            height: 140;
            clip: true;
            color:"#bfbfbf";
            anchors.right: parent.right
            anchors.rightMargin: 5;
            anchors.top: repeatPreview.bottom;
            anchors.topMargin: 2;
            border.color: "black"
            border.width: 1;

            Rectangle{
                id:hourBox;
                color:"#bfbfbf";
                width:40;
                height:140;
                anchors.left: parent.left;
                anchors.leftMargin: 12;
                anchors.top: parent.top;
                Component{
                    id:hourDelegate;
                        Column{
                            id:hourCol
                            spacing:2;
                            anchors.left: parent.left;
                            Rectangle{
                                id: hours;
                                width:40;
                                height:20;
                                color:"#bddeff";
                                border.color: "black";
                                border.width: 1;

                                Text{
                                    id:hourText;
                                    text:hour;
                                    font.bold: true;
                                    anchors.centerIn: parent;
                                }

                                MouseArea{
                                    anchors.fill: parent;
                                    onPressed: hours.color="#bdffec";
                                    onReleased: hours.color="#bddeff";
                                    onClicked: time.text=hourText.text;
                                }
                            }
                        }
                }
                ListView {
                         anchors.fill: parent
                         model: hourModel
                         delegate: hourDelegate
                     }
                ListModel {
                    id:hourModel;
                     ListElement {
                         hour: "1"
                     }
                     ListElement {
                         hour: "2"
                     }
                     ListElement {
                         hour: "3"
                     }
                     ListElement {
                         hour: "4"
                     }
                     ListElement {
                         hour: "5"
                     }
                     ListElement {
                         hour: "6"
                     }
                     ListElement {
                         hour: "7"
                     }
                     ListElement {
                         hour: "8"
                     }
                     ListElement {
                         hour: "9"
                     }
                     ListElement {
                         hour: "10"
                     }
                     ListElement {
                         hour: "11"
                     }
                     ListElement {
                         hour: "12"
                     }
                 }
            }


            Rectangle{
                id:minutBox;
                color:"#bfbfbf";
                width:40;
                height:140;
                anchors.left: hourBox.right;
                anchors.leftMargin: 2;
                anchors.top: parent.top;
                Component{
                    id:minuteDelegate;
                        Column{
                            id:minuteCol
                            spacing:2;
                            anchors.left: hourDelegate.right;
                            Rectangle{
                                id: minutes;
                                width:40;
                                height:20;
                                color:"#bddeff";
                                border.color: "black";
                                border.width: 1;

                                Text{
                                    id:minuteText
                                    text:minute;
                                    font.bold: true;
                                    anchors.centerIn: parent;
                                }
                                MouseArea{
                                    anchors.fill: parent;
                                    onPressed: minutes.color="#bdffec";
                                    onReleased: minutes.color="#bddeff";
                                    onClicked: timeMinutes.text=minuteText.text;
                                }
                            }
                        }
                }

                ListView {
                         anchors.fill: parent
                         model: minuteModel
                         delegate: minuteDelegate
                     }
                ListModel {
                    id:minuteModel;
                    ListElement {
                        minute: "00"
                    }
                     ListElement {
                         minute: "01"
                     }
                     ListElement {
                         minute: "02"
                     }
                     ListElement {
                         minute: "03"
                     }
                     ListElement {
                         minute: "04"
                     }
                     ListElement {
                         minute: "05"
                     }
                     ListElement {
                         minute: "06"
                     }
                     ListElement {
                         minute: "07"
                     }
                     ListElement {
                         minute: "08"
                     }
                     ListElement {
                         minute: "09"
                     }
                     ListElement {
                         minute: "10"
                     }
                     ListElement {
                         minute: "11"
                     }
                     ListElement {
                         minute: "12"
                     }
                     ListElement {
                         minute: "13"
                     }
                     ListElement {
                         minute: "14"
                     }
                     ListElement {
                         minute: "15"
                     }
                     ListElement {
                         minute: "16"
                     }
                     ListElement {
                         minute: "17"
                     }
                     ListElement {
                         minute: "18"
                     }
                     ListElement {
                         minute: "19"
                     }
                     ListElement {
                         minute: "20"
                     }
                     ListElement {
                         minute: "21"
                     }
                     ListElement {
                         minute: "22"
                     }
                     ListElement {
                         minute: "23"
                     }
                     ListElement {
                         minute: "24"
                     }
                     ListElement {
                         minute: "25"
                     }
                     ListElement {
                         minute: "26"
                     }
                     ListElement {
                         minute: "27"
                     }
                     ListElement {
                         minute: "28"
                     }
                     ListElement {
                         minute: "29"
                     }
                     ListElement {
                         minute: "30"
                     }
                     ListElement {
                         minute: "31"
                     }
                     ListElement {
                         minute: "32"
                     }
                     ListElement {
                         minute: "33"
                     }
                     ListElement {
                         minute: "34"
                     }
                     ListElement {
                         minute: "35"
                     }
                     ListElement {
                         minute: "36"
                     }
                     ListElement {
                         minute: "37"
                     }
                     ListElement {
                         minute: "38"
                     }
                     ListElement {
                         minute: "39"
                     }
                     ListElement {
                         minute: "40"
                     }
                     ListElement {
                         minute: "41"
                     }
                     ListElement {
                         minute: "42"
                     }
                     ListElement {
                         minute: "43"
                     }
                     ListElement {
                         minute: "44"
                     }
                     ListElement {
                         minute: "45"
                     }
                     ListElement {
                         minute: "46"
                     }
                     ListElement {
                         minute: "47"
                     }
                     ListElement {
                         minute: "48"
                     }
                     ListElement {
                         minute: "49"
                     }
                     ListElement {
                         minute: "50"
                     }
                     ListElement {
                         minute: "51"
                     }
                     ListElement {
                         minute: "52"
                     }
                     ListElement {
                         minute: "53"
                     }
                     ListElement {
                         minute: "54"
                     }
                     ListElement {
                         minute: "55"
                     }
                     ListElement {
                         minute: "56"
                     }
                     ListElement {
                         minute: "57"
                     }
                     ListElement {
                         minute: "58"
                     }
                     ListElement {
                         minute: "59"
                     }

                }
            }

            Rectangle{
                id:amPmBox;
                width:40;
                height:40;
                color:"#bfbfbf";
                anchors.left: minutBox.right;
                anchors.leftMargin: 2;
                anchors.top: parent.top;
                anchors.topMargin: 60;

                Component{
                    id:amPmDelegate;
                        Column{
                            id:amPmCol
                            spacing:2;
                            anchors.left: hourDelegate.right;
                            Rectangle{
                                id: am;
                                width:40;
                                height:20;
                                color:"#bddeff";
                                border.color: "black";
                                border.width: 1;

                                Text{
                                    id:amPmText;
                                    text:amPm;
                                    font.bold: true;
                                    anchors.centerIn: parent;
                                }
                                MouseArea{
                                    anchors.fill: parent;
                                    onPressed: am.color="#bdffec";
                                    onReleased: am.color="#bddeff";
                                    onClicked: timeAmPm.text = amPmText.text;
                                }
                            }
                        }
                }

                ListView {
                         anchors.fill: parent
                         model: amPmModel
                         delegate: amPmDelegate
                     }
                ListModel {
                    id:amPmModel;
                    ListElement {
                        amPm: "AM"
                    }
                    ListElement {
                        amPm: "PM"
                    }
                }
            }
        }


    }


    function callEdit(){
        if(editMode){
        editMode = false;
            alarmTitleText.text = "Alarms";
            add.enabled = true;
            editModeText.visible=false;
        }
        else{
            editMode = true;
        alarmTitleText.text = " Click 'ON/OFF' to remove alarms";
            add.enabled = false;
            editModeText.visible=true;
        }

    }

    function saveAlarm(title, hour, minutes, amPm){
        layoutModel.append({"title":title, "timeHour":hour,"timeMin":minutes,"timeAmPm":amPm,"days":alarmDays });
        addAlarmBox.visible = false;
        alarmDays = "";

    }

    function addAlarm(){
        addAlarmBox.visible = true;
    }
}
